﻿@{
    ViewBag.Title = "City List";
    ViewBag.Header = "City";
    ViewBag.Caption = "Listing";
    ViewBag.AddNewUrl = Url.Action("CityMaintenance", "Master");
    ViewBag.XlsUrl = Url.Action("Export", "Master", new { type = "Excel" });
    ViewBag.PdfUrl = Url.Action("Export", "Master", new { type = "Pdf" });
    ViewBag.PrintUrl = Url.Action("Print", "Master");
}
<div id="listing_City">
    <div class="box">
        <div class="box-body table-responsive">
            <table id="dt_Grid" class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>City</th>
                        <th>State</th>
                        <th>Country</th>                        
                        <th>&nbsp;</th>
                        <th>&nbsp;</th>
                    </tr>
                </thead>
                <tbody id="dt_Rows"></tbody>
            </table>
        </div>
    </div>
</div>

<div id="dialog-confirm" title="Confirm box?">
    <p>
        <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;">
        </span> Are you sure want to delete?
    </p>
</div>

<script id="dataTable_Grid" type="text/x-jquery-tmpl">
    <tr>
        <td>${Name}</td>
        <td>${StateName}</td>
        <td>${CountryName}</td>        
        <td><a href='@Url.Action("CityMaintenance")?Id=${Id}'>Edit</a></td>
        <td><a id="lnkDelete" href='@Url.Action("DeleteCity")?Id=${Id}'>Delete</a></td>  
    </tr>
</script>

<script type="text/javascript">
    $(document).ready(function () {
        $.getJSON('@Url.Action("GetCity", "Master")', function (result) {
            $.tmpl($('#dataTable_Grid'), result).appendTo('#dt_Rows');

            $('#dt_Grid').dataTable({
                "bPaginate": true,
                "bLengthChange": true,
                "bFilter": true,
                "bSort": true,
                "bInfo": true,
                "bAutoWidth": false
            });

        });
    });

</script>

@{
    var message = TempData["AlertMessage"] ?? string.Empty;
}

<script type="text/javascript">
    var message = '@message';
    if(message)
        alert(message);
</script>

<script>
    $(document).ready(function () {
    var url = "";

    if ('@TempData["msg"]' != "") {
    $("#dialog-alert").dialog('open');
    }
    $("#dialog-confirm").dialog({
    autoOpen: false,
    resizable: false,
    height: 170,
    width: 350,
    show: { effect: 'drop', direction: "up" },
    modal: true,
    draggable: true,
    open: function (event, ui) {
    $(".ui-dialog-titlebar-close").hide();
    },
    buttons: {
    "OK": function () {
    $(this).dialog("close");
    window.location.href = url;
    },
    "Cancel": function () {
    $(this).dialog("close");
    }
    }
    });

    $("#lnkDelete").live("click", function (e) {
    // e.preventDefault(); use this or return false
    url = $(this).attr('href');
    $("#dialog-confirm").dialog('open');

    return false;
    });
    });
</script>